<template>
    <div>
        <h3 style="padding: 3px;">聊天室</h3>
        <Tabs style="margin-top: 20px" type="card">
            <TabPane label="在线聊天" icon="social-apple">
                <Row>
                    <Col>
                    <div id="editor">

                    </div>
                    </Col>

                    <Col span="4" offset="10" style="margin-top: 20px">
                    <Button type="success" long style="text-align: center" @click="send">发送</Button>
                    </Col>
                </Row>
            </TabPane>
            <TabPane label="定时消息" icon="social-windows">定时消息</TabPane>
            <TabPane label="帮助" icon="social-tux">帮助</TabPane>
        </Tabs>
    </div>
</template>
<script>
    import E from 'wangeditor'
    import {sendMsgToChatRoom} from '../../api/api'
    import {editorConfig} from '../../utils/wangEditorConfig'
    export default {
        data() {
            return {
                chatRoomId: this.$store.state.operatedLiveRoomId,
                chatContent: ''
            }
        },
        methods: {
            //发送消息
            send(){
                if (this.chatContent == '' || this.chatContent == null) {
                    this.editor.txt.html = "请输入内容哦"
                    return false;
                }
                let toSend = {
                    chatRoomId: this.chatRoomId,
                    content: this.chatContent
                }
                sendMsgToChatRoom(toSend).then(res => {
                    if (res.code == 0) {
                        this.$Message.success('发送成功！');
                    }
                })
            }
        },
        mounted(){
            this.editor = new E('#editor')
            this.editor.customConfig.onchange = (html) => {
                this.chatContent = html
            }
            editorConfig(this.editor)
        }
    }
</script>
<style>

</style>